最新版模块联邦技术

https://xiaochen1024.com/cdn/fe_interview/fe-engineering-docs-vite-docs-note-16-%E6%A8%A1%E5%9D%97%E8%81%94%E9%82%A6:%20%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%BC%98%E9%9B%85%E7%9A%84%E8%B7%A8%E5%BA%94%E7%94%A8%E4%BB%A3%E7%A0%81%E5%85%B1%E4%BA%AB.html

是什么

webpack5 有个很重要的功能，就是模块联邦。Module Federation 中文直译为“模块联邦”，而在 webpack 官方文档中，其实并未给出其真正含义，但给出了使用该功能的 motivation， 即动机，翻译成中文

多个独立的构建可以形成一个应用程序。这些独立的构建不会相互依赖，因此可以单独开发和部署它们。这通常被称为微前端，但并不仅限于此

原文在这里：module-federationopen in new window， 并且给出了stackblitz 在线运行链接open in new window

可以做到什么效果？ 为社么要淘汰老的？

老的微前端架构，需要启动底座以及扩展。为了方便调试，底座和扩展分别是多个仓库维护的，在本地调试时，在扩展仓库下载代码之后，需要同时启动底座和扩展

vite 可以接入吗？

vite 要怎么接入？

  1. 基于 lerna 或者 pnpm 的多 repo 仓库形式，多个 app 并行启动。
  2. 加载一个 js 资源，用于定义 web component 的组件，并在 attribute 中什么 appId 以及共享的一些属性等。
  3. web component 会通过 id 获取应用的信息，包含构建产物的线上链接。

接入之后带来什么好处？

还有什么坑点？

  1. css 未隔离。
    1. 解法：各个应用使用自定义的前缀，但是只能做规范
Last Updated:
Contributors: yiliang114